<template>
  <div class="footer-music">
    <div class="footer-left" @click="show">
      <img :src="playList[playListIndex].al.picUrl" alt="" />
      <div class="info">
        <div class="name">{{ playList[playListIndex].name }}</div>
        <span class="slide_to_switch">横滑以切换歌曲</span>
      </div>
    </div>
    <div class="footer-right">
      <van-icon
        name="play-circle-o"
        style="margin-right: 0.2rem"
        @click="playMusic"
        v-if="musicState"
      />
      <van-icon
        name="pause-circle"
        style="margin-right: 0.2rem"
        v-else
        @click="playMusic"
      />
      <van-icon name="bars" @click="showPopupList" />
    </div>
    <audio ref="mediaPlay" :src="musicUrl" @canplay="addDuration"></audio>
    <!-- 将播放/暂停音乐事件传入歌曲详情组件，实现歌曲操作 -->
    <!-- 传入底部音乐操作栏得按钮展示属性，同步里外按钮状态 -->
    <MusicDetailPageVue
      style="position: absolute"
      :currentMusic="playList[playListIndex]"
      :playMusic="playMusic"
      :musicState="musicState"
      :addDuration="addDuration"
      :showPopupList="showPopupList"
    ></MusicDetailPageVue>
    <PopupMusicList :playList="playList"></PopupMusicList>
  </div>
</template>

<script>
import { ref, watch, getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import { computed, onMounted, onUpdated } from '@vue/runtime-core'
import MusicDetailPageVue from './MusicDetailPage.vue'
import PopupMusicList from './PopupMusicList.vue'
export default {
  name: 'FooterMusic',
  setup() {
    // getCurrentInstance相当于vue2中的this vm实例
    const vm = getCurrentInstance()
    // 引入事件总线
    const bus = vm.appContext.config.globalProperties.$bus
    // 引入vuex
    const store = useStore()
    // 常量名和dom元素得ref属性同名时，ref值为null即可获取dom元素
    const mediaPlay = ref(null)
    // 获取当前播放的音乐渲染底部音乐栏内容
    const playList = computed(() => {
      return store.state.playList
    })
    const playListIndex = computed(() => {
      return store.state.playListIndex
    })
    // 获取音乐播放的状态
    const musicState = computed(() => {
      return store.state.musicState
    })
    // 获取音乐的url地址
    const musicUrl = computed(() => {
      return store.state.musicUrl
    })
    // 点击展示歌曲详情页面
    const show = () => {
      store.commit('showMusicPageState', true)
    }
    // 播放按钮点击事件
    const playMusic = () => {
      if (mediaPlay.value.paused) {
        mediaPlay.value.play()
        store.commit('musicStateChange', false)
        setcurrentMusicLyricPosition()
      } else {
        mediaPlay.value.pause()
        store.commit('musicStateChange', true)
        clearInterval(musicLyricInterval) // 歌曲暂停清除定时器，停止发送歌词对应时间
      }
    }
    // 播放开始不停向vuex发送当前歌词对应的时间
    let musicLyricInterval
    const setcurrentMusicLyricPosition = () => {
      musicLyricInterval = setInterval(() => {
        store.commit(
          'setcurrentMusicLyricPosition',
          mediaPlay.value.currentTime
        )
      }, 1000)
    }
    // 在audio标签canplay事件触发后，向vuex发送歌曲的总时长的方法
    const addDuration = () => {
      store.commit('setCurrentMusicTime', mediaPlay.value.duration)
    }
    // 点击显示底部音乐栏 / 音乐详情，歌单
    const showPopupList = () => {
      store.commit('popupMusicListState', true)
    }
    // 监听歌单变化和歌单下标变化获取歌曲url以切换歌曲
    watch([playListIndex, playList], () => {
      // audio标签自动播放切换后的歌曲
      mediaPlay.value.autoplay = true
      // 播放按钮先暂停再播放
      store.commit('musicStateChange', true)
      store.commit('musicStateChange', false)
      // 获取切换后的歌曲的url地址
      store.dispatch('getMusicUrl', playList.value[playListIndex.value].id)
    })
    onMounted(() => {
      // 监听来自音乐详情页的拖动事件，重新赋值给audio组件
      bus.on('changePosition', (value) => {
        mediaPlay.value.currentTime = value
      })
    })
    onUpdated(() => {
      // 切换歌曲导致底部栏数据更新，从新查找歌词，发送歌词对应时间
      setcurrentMusicLyricPosition()
      // 页面更新发送最新的歌曲时长
      // addDuration()
      store.dispatch('getLyric', playList.value[playListIndex.value].id)
    })
    return {
      playList,
      playListIndex,
      musicState,
      playMusic,
      mediaPlay,
      musicUrl,
      show,
      bus,
      setcurrentMusicLyricPosition,
      musicLyricInterval,
      addDuration,
      showPopupList
    }
  },
  components: { MusicDetailPageVue, PopupMusicList }
}
</script>

<style lang="less" scoped>
.footer-music {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  bottom: 0;
  left: 0;
  padding: 0.2rem 0.2rem;
  width: 100%;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  .footer-left {
    flex: 1;
    display: flex;
    align-items: center;
    img {
      width: 0.8rem;
      height: 0.8rem;
      border-radius: 50%;
    }
    .info {
      margin-left: 0.2rem;
      .name {
        font-size: 0.28rem;
        font-weight: 700;
      }
      .slide_to_switch {
        font-size: 0.24rem;
        color: #bbb;
      }
    }
  }
  .footer-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.6rem;
  }
}
</style>
